<template>
  <!-- 关注者列表 -->
  <div
    class="infinite-list-panel"
    v-loading="loading"
    element-loading-text="拼命加载中"
  >
    <div class="infinite-list">
      <!-- 这里触发组件同步更新必须更改key的值为可变 -->
      <div
        class="list-item"
        v-for="item in userData.userDataList"
        :key="item.post_id"
      >
        <YouFansListItemComponents
          @reloadDataList="initUserListData"
          :userData="item"
          :key="Math.random() * 100"
        />
      </div>
    </div>
    <p class="loading" v-if="userData.loading">加载中...</p>
    <p class="addload" v-if="!noMore" @click="addLoadingData">点击加载更多</p>
    <p class="nomore" v-if="noMore">没有更多了</p>
  </div>
</template>
<script>
//YouFansListItemComponents
import YouFansListItemComponents from "@/components/FansList/YouFansListItemComponents.vue";
//获取统一请求接口
import { getYouKnowFoUserListMapperDataByUserId } from "@/api";

export default {
  name: "YouFansListYouKnowFoListComponents",
  components: {
    YouFansListItemComponents,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      user_id: this.$route.params.uid,
      loading: true,
      userData: {
        user_id: this.$route.params.uid,
        current_user_id: JSON.parse(localStorage.getItem("user")).user_id
          ? JSON.parse(localStorage.getItem("user")).user_id
          : 1,
        currentPage: 1, //起始页数值为1
        loading: false,
        pageSize: 10, //每页查询条数
        pageTotal: 1, //取后端返回内容的总页数
        //测试数据
        userDataList: [],
      },
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.userData.currentPage >= this.userData.pageTotal;
    },
    addMore() {
      return !this.noMore();
    },
  },
  mounted() {
    this.initUserListData();
  },
  methods: {
    initUserListData() {
      this.loading = true;
      this.loadingUserList();
    },
    //分页初始化加载粉丝用户列表
    async loadingUserList() {
      let res = await getYouKnowFoUserListMapperDataByUserId(this.userData);
      // console.log(res.data);
      if (res.state == 200) {
        this.userData.userDataList = res.data.data;
        this.userData.pageTotal = res.data.pageTotal;
        this.userData.loading = false;
        this.loading = false;
      }
    },
    addLoadingData() {
      this.userData.loading = true;
      setTimeout(() => {
        this.userData.currentPage += 1; //页数+1
        this.addLoadingUserList(); //调用接口，此时页数+1，查询下一页数据
      }, 1000);
    },
    //分页累加用户列表
    async addLoadingUserList() {
      let res = await getYouKnowFoUserListMapperDataByUserId(this.userData);
      // console.log(res.data);
      if (res.state == 200) {
        this.userData.userDataList = this.userData.userDataList.concat(
          res.data.data
        );
        this.userData.pageTotal = res.data.pageTotal;
        this.userData.loading = false;
      }
    },
  },
};
</script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
/* 备注：应用下拉加载的外层容器必须设置固定高度，否则会自动无限加载 */
.infinite-list-panel {
  overflow: hidden;
}

.infinite-list {
  overflow: auto;
  /* height: 100vh; */
}

.infinite-list-panel .addload {
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  color: rgb(29, 155, 240);
  font-weight: 700;
}

.infinite-list-panel .loading,
.infinite-list-panel .nomore {
  text-align: center;
  padding: 10px 0;
  font-weight: 700;
}

.NoData {
  padding: 10px 0;
  text-align: center;
  font-weight: 700;
}
</style>